<template>
  <el-text>教室{{classInfo.ID}}</el-text>
  <div style="margin-left: 20px;border: 1px solid var(--el-border-color);border-radius: 5px;margin-top: 5px">
    <el-row v-for="(row,rowIndex) in seatList" :key="rowIndex" style="width: 500px">
      <el-row v-for="(seat,seatIndex) in row" :key="seatIndex"
           style="width: 50px;height: 50px;margin-left: 5px"
           :class="{'seats': true, 'selected': seat.Selected&isChoose.value,'available':!seat.Selected}"
           @click="selectSeat(seat)">
        <div style="margin: auto">{{seat.SortID}}</div>
      </el-row>
    </el-row>
  </div>
  <div style="margin-top: 20px">
    <el-text>{{"请选择时间"}}</el-text>
    <el-time-picker
        style="margin-left: 20px"
        v-model="time"
        is-range
        range-separator="To"
        start-placeholder="Start time"
        end-placeholder="End time"
    />
    <el-button type="primary" @click="chooseTime" style="margin-left: 20px" >确定</el-button>
  </div>
  <el-dialog
      v-model="dialogVisible"
      width="50%"
  >
    <el-descriptions title="是否选择该座位"
                     :column="1"
                     direction="vertical"
                     border>
      <div>是否选择座位</div>
      <el-descriptions-item label="座位号">{{selectedSeat.ID}}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{time[0]}}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{time[1]}}</el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSeat">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import API from "@/plugins/axiosInstanse";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import router from "@/router";

export default {
  name: "Seat",
  setup(){
    const classInfo = useRoute().query
    const seatList = ref()
    const time = ref()
    const dialogVisible = ref(false)
    const isChoose = ref(false)
    const selectedSeat = ref()
    onMounted(()=>{
      if(classInfo.ID==null){
        router.push('/class')
      }
      API.get('api/getSeatList',{
        params:{
          cid:classInfo.ID,
          length:classInfo.Length
        }
      }).then((response)=>{
            seatList.value = response.SeatList
          })
    })
    const selectSeat=(seat)=>{
      if(!isChoose.value){
        ElMessage({
          message: "请先选择时间",
          type: 'warning',
        })
        return
      }
      if(seat.Selected){
        ElMessage({
          message: "该座位已被预定",
          type: 'warning',
        })
        return
      }
      selectedSeat.value = seat
      dialogVisible.value = true
    }
    const chooseTime=()=>{
      if(time.value == null){
        ElMessage({
          message: "请选择时间",
          type: 'warning',
        })
        return
      }
      let t1 = new Date(time.value[0]);
      t1 = t1.setDate(t1.getDate()+1)
      t1 = new Date(t1)
      let t2 = new Date(time.value[1]);
      t2 = t2.setDate(t2.getDate()+1)
      t2 = new Date(t2)

      API.get('api/getSeatList',{
        params:{
          cid:classInfo.ID,
          length:classInfo.Length,
          startTime:t1,
          endTime:t2,
        }
      }).then((response)=>{
        seatList.value = response.SeatList
        isChoose.value = true
      })
      ElMessage({
        message: "搜索成功",
        type: 'success',
      })
    }
    const confirmSeat = ()=>{
      dialogVisible.value = false
      let t1 = new Date(time.value[0]);
      t1 = t1.setDate(t1.getDate()+1)
      t1 = new Date(t1)
      let t2 = new Date(time.value[1]);
      t2 = t2.setDate(t2.getDate()+1)
      t2 = new Date(t2)
      API.get('api/chooseSeat',{
        params:{
          uid:sessionStorage.getItem("ID"),
          sid:selectedSeat.value.ID,
          startTime:t1,
          endTime:t2,
        }
      })
    }
    return{
      selectSeat,
      chooseTime,
      confirmSeat,
      seatList,
      classInfo,
      isChoose,
      time,
      dialogVisible,
      selectedSeat
    }
  }
}
</script>

<style scoped>
.seat-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.seats {
  flex-direction: column;
  gap: 5px;
  width: 10px;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  margin: 10px;
}
canvas {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.legend {
  display: flex;
  justify-content: center;
  align-items: center;
}
.legend span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
.available {
  background-color: #9ccc65;
}
.selected {
  background-color: #f44336;
}
</style>